<template>
  <div class="login-wrap">
    <img src="@/assets/logo.png" width="150" height="150" style="margin:20px auto 0;display:block;" />
    <div style="padding:30px;">
      <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
      <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <mt-button size="large" type="primary" style="margin-top:20px;" @click="clickLogin">登录</mt-button>
    </div>
    <div style="display:flex;justify-content:center;">
      <routerLink to="/register" class="login-clickToRegister">还没有账号?点击注册</routerLink>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import { Toast } from 'mint-ui'
export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    ...mapActions(['amendStateUsername']),
    clickLogin() {
      let { username, password } = this
      //修改state中username数据
      this.amendStateUsername(username)
      this.$axios.post('/api/login', { username, password }).then(data => {
        //用户名密码正确即登录成功
        if (data.data.code === 0) {
          Toast('登录成功')
          this.$router.replace(`/chat`)
        }else if(data.data.code===2){
          Toast(data.data.msg)
        } else{
          Toast(data.data.msg)
        }
      })
    },
  },
}
</script>

<style scoped>
.login-clickToRegister {
  font-size: 20px;
  text-decoration: none;
}
</style>